<template>
  <div class="img-sort-tem">
    <div class="img-list">
      <vuedraggable
        class="vue-draggable"
        draggable=".draggable-item"
        tag="ul"
        v-model="imgList"
        @end="dataDragEnd"
      >
        <li :key="item.id" class="draggable-item" v-for="item in imgList">
          <el-image :preview-src-list="imgList" :src="item.filePath"></el-image>
        </li>
      </vuedraggable>
    </div>
    <div class="json-box">
      <el-row :gutter="16">
        <el-col :span="12">
          <div class="border-bl">
            <vue-json-pretty :data="imgListOld" />
            <!-- <json-view :data="imgListOld" /> -->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="border-bl">
            <vue-json-pretty v-if="imglistNew.length != 0" :data="imglistNew" />
            <!-- <json-view :data="imgList" /> -->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 图片拖动
import vuedraggable from "vuedraggable";
// import jsonView from "vue-json-views";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

export default {
  name: "imgSort",
  components: {
    vuedraggable,
    VueJsonPretty,
  },
  data() {
    return {
      imgList: [
        {
          id: "000",
          sort: 0,
          filePath: "https://static.jeecg.com/upload/test/1_1588149743473.jpg",
        },
        {
          id: "111",
          sort: 1,
          filePath:
            "https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg",
        },
        {
          id: "222",
          sort: 2,
          filePath:
            "https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg",
        },
        {
          id: "333",
          sort: 4,
          filePath:
            "https://static.jeecg.com/temp/国炬软件logo_1606575029126.png",
        },
        {
          id: "444",
          sort: 3,
          filePath:
            "https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg",
        },
      ],
      imgListOld: [],
      imglistNew: [],
    };
  },
  watch: {
    imgList(nw, ol) {
      this.imglistNew = nw;
      console.log(ol);
    },
  },
  created() {
    this.imgListOld = Object.assign([], this.imgList);
  },
  methods: {
    dataDragEnd() {
      this.imglistNew.forEach((item, index) => {
        console.log(item);
        this.$set(this.imglistNew[index], "sort", index);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.vue-draggable {
  height: 158px;
}
.img-sort-tem {
  width: 86%;
  margin: 15px auto;
}
.border-bl {
  border: 1px solid #000;
  height: 580px;
  overflow-y: auto;
}
.img-list li {
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 0 10px;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 4px;
}
/deep/.el-image {
  padding: 8px;
  overflow: visible;
}
</style>